<template>
  <!-- <div id="screen"
    :style="{ 'width': `${styles.width}px`, 'height': `${styles.height}px`, 'transform': `${styles.transform}` }"> -->
  <div id="screen" class="w-full h-full overflow-hidden text-[var(--data-base-color)]">
    <home />
  </div>
</template>
<script setup lang="ts">
import home from './index.vue'
import { onMounted, ref, onUpdated } from 'vue';
import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'

import autofit from 'autofit.js'
import { PLATFORM_Map, usePageVariablesStoreHook } from '@/store/modules/pageVariables';

const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()


onBeforeMount(() => {
  if (usePageVariablesStoreHook().getPlatform() == PLATFORM_Map.monitor) {
    useDataDashboardThemeStore.CHANGE_SETTING({ key: 'dataDashboardType', value: 3 })
  }
})

onMounted(() => {
  useDataDashboardThemeStore.setDataDashboardThem()
  autofit.init({
    dh: 1080,
    dw: 1920,
    el: "#app",
    resize: true,
    delay: 0.5,
    transition: 0.5,
    limit: 0,
    ignore: ['.ignore', '.leaflet']
  }, false) // 可关闭控制台运行提示输出
})

onUnmounted(() => {
  autofit.off("app")
})
</script>
<style scoped lang="scss">
//#screen {
//  z-index: 100;
//  transform-origin: 0 0;
//  position: fixed;
//  left: 0;
//  top: 0;
//  transition: 0.3s;
//}
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#app {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
</style>
<!--<template>-->
<!--   <div id="screen"-->
<!--    :style="{ 'width': `${styles.width}px`, 'height': `${styles.height}px`, 'transform': `${styles.transform}` }"> -->
<!--    <div id="screen" ref="box"-->
<!--         :style="{ ...styles.box }"-->
<!--         class="w-full h-full overflow-hidden">-->
<!--      <div  :style="{ ...styles.wrapper }"-->
<!--        class="screen-wrapper"-->
<!--        ref="screenWrapper"-->
<!--      >-->
<!--        <home />-->
<!--      </div>-->
<!--    </div>-->
<!--</template>-->
<!--<script setup lang="ts">-->
<!--import home from './index.vue'-->
<!--import { onMounted, ref } from 'vue';-->
<!--import { useDataDashboardThemeStoreHook } from '@/store/modules/data-dashboard-theme'-->
<!--import { autoScale } from './useScreen'-->
<!--const useDataDashboardThemeStore = useDataDashboardThemeStoreHook()-->

<!--// const screenWrapper = ref<HTMLElement>();-->
<!--// const box = ref<HTMLElement>();-->
<!--//-->
<!--// const {initScale,addListener,styles,clearListener} = scaleScreen(screenWrapper, box)-->

<!--onMounted(() => {-->
<!--  useDataDashboardThemeStore.setDataDashboardThem()-->
<!--  autoScale('body')-->
<!--  // nextTick(async () => {-->
<!--  //   initScale()-->
<!--  // });-->
<!--})-->

<!--// onUnmounted(() => {-->
<!--//   clearListener();-->
<!--// });-->
<!--</script>-->
<!--<style scoped>-->
<!--#screen {-->
<!--  z-index: 100;-->
<!--  transform-origin: 0 0;-->
<!--  position: fixed;-->
<!--  left: 0;-->
<!--  top: 0;-->
<!--  transition: 0.3s;-->
<!--}-->
<!--</style>-->
